<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { regionData, codeToText } from 'element-china-area-data';
import { userInfoStore } from '../assets/userStore/userStore';
import { addAddress, queryAddressByUid, queryDefaultAddressByUid, updateDefaultAddressByUid } from '../assets/net/NetUtils';
import { ComponentSize, ElMessage, FormInstance } from 'element-plus';
import { CircleCheckFilled } from '@element-plus/icons-vue'
import { AddressModel } from '../assets/model/Address';

const fill = ref<boolean>(true)
const size = ref<ComponentSize>('default')
const isEmpty = ref<boolean>(true)
const addresses = ref<Array<AddressModel>>()
const userStore = userInfoStore();
const selectedOptions = ref();
const defaultAddress = ref<AddressModel>()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<AddressModel>({
    county: "",
    city: "",
    uid: userStore.uid,
    street: '',
    province: ""
})

const handleChange = () => {
    ruleForm.province = codeToText[selectedOptions.value[0]];
    let cityCode = selectedOptions.value[1];
    if (cityCode === 5002) {
        ruleForm.county = codeToText[selectedOptions.value[2]];
    } else if (cityCode === (5001 || 1201 || 1101 || 1001)) {
        ruleForm.city = codeToText[selectedOptions.value[1]];
    } else {
        ruleForm.city = codeToText[selectedOptions.value[1]];
        ruleForm.county = codeToText[selectedOptions.value[2]];
    }
    console.log(ruleForm);
}

const submitForm = async () => {
    let value = await addAddress(ruleForm)
    if (value.code === 200) {
        ElMessage.success("地址添加成功")
        queryAddressByUid(userStore.uid)
            .then((value) => {
                addresses.value = value.data;
                isEmpty.value = value.data.length === 0 ? true : false;
            })
    }
}
const props = {
    expandTrigger: 'hover' as const,
}

const updateDefault = (aid: number) => {
    updateDefaultAddressByUid(userStore.uid, aid)
        .then((value: object) => {
            if (value.code === 200) {
                ElMessage.success(value.data);
                queryAddressByUid(userStore.uid)
                    .then((value) => {
                        addresses.value = value.data;
                    })
                queryDefaultAddressByUid(userStore.uid)
                    .then((value) => {
                        defaultAddress.value = value.data
                    })
            } else {
                ElMessage.error(value.msg);
            }
        })
}

onMounted(() => {
    queryAddressByUid(userStore.uid)
        .then((value) => {
            addresses.value = value.data;
        })
    queryDefaultAddressByUid(userStore.uid)
        .then((value) => {
            defaultAddress.value = value.data
        })
    isEmpty.value = (addresses.value === null && defaultAddress.value === null) ? true : false;
})
</script>
<template>
    <el-row>
        <el-col :span="24" style="margin-top: 1%;">
            <el-form ref="ruleFormRef" :model="ruleForm">
                <el-form-item label="选择区域">
                    <el-col :span="24">
                        <el-cascader size="large" :options="regionData" v-model="selectedOptions" :props="props"
                            @change="handleChange" style="width: 50%;">
                        </el-cascader>
                    </el-col>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-row justify="space-between" style="width: 100%;">
                        <el-col :span="19">
                            <el-input v-model="ruleForm.street" placeholder="请输入详细地址" size="large"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="warning" plain style="padding: 3%;width: 100%;" size="large"
                                @click="submitForm">添加地址</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-empty v-show="isEmpty" description="快去添加地址吧～" />
    <el-text style="font-size: large;">我的地址</el-text>
    <el-scrollbar height="100%" style="overflow-y: hidden; margin-top: 1%;" v-show="!isEmpty">
        <el-space wrap :size="size" :fill="fill" style="width: 100%;">
            <el-text v-show="defaultAddress">
                默认地址
            </el-text>
            <el-card shadow="hover" v-show="defaultAddress">
                <el-row style="width: 100%;" align="middel" justify="center">
                    <el-col :span="4">
                        <el-text>
                            {{ defaultAddress?.province }}
                        </el-text>
                    </el-col>
                    <el-col :span="3">
                        <el-text>
                            {{ defaultAddress?.city }}
                        </el-text>
                    </el-col>
                    <el-col :span="4">
                        <el-text>
                            {{ defaultAddress?.county }}
                        </el-text>
                    </el-col>
                    <el-col :span="10">
                        <el-text>
                            {{ defaultAddress?.street }}
                        </el-text>
                    </el-col>
                    <el-col :span="3">
                        <el-icon>
                            <CircleCheckFilled color="#32d700"/>
                        </el-icon>
                    </el-col>
                </el-row>
            </el-card>
            <el-text>
                其它地址
            </el-text>
            <div v-for="i in addresses" :key="i.aid">
                <el-card shadow="hover">
                    <el-row style="width: 100%;" align="middel" justify="center">
                        <el-col :span="4">
                            <el-text>
                                {{ i.province }}
                            </el-text>
                        </el-col>
                        <el-col :span="3">
                            <el-text>
                                {{ i.city }}
                            </el-text>
                        </el-col>
                        <el-col :span="4">
                            <el-text>
                                {{ i.county }}
                            </el-text>
                        </el-col>
                        <el-col :span="10">
                            <el-text>
                                {{ i.street }}
                            </el-text>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="success" plain style="width: 100%;"
                                @click="updateDefault(i.aid!)">设为默认</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
    </el-scrollbar>
</template>
<style>
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sider {
    padding: 20px;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0px 0px 1px 1px #fbaf5a;
}

.font_main {
    font-size: 25px;
    color: black;
    font-weight: bolder;
}

.header_profile {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}

.imgInfo {
    border-radius: 50%;
    width: 45%;
    border-color: white;
    border-width: 10px;
    border-style: solid;
}
</style>
